<template>
	<view class="evaluate-main">
		<view class="evaluate-title">您对本次服务满意吗？<label class="radio">匿名提交
				<radio :value="1" :checked="isAnonymous" />
			</label></view>
		<UserItemCard></UserItemCard>
		<view class="evaluate-rate">
			<view class="evaluate-item">
				<label>综合</label>
				<uni-rate class="user-score-rate" :size="24" :margin="16" allow-half v-model="score"/>
				<text>{{getScore0Text}}</text>
			</view>
			<view class="evaluate-item">
				<label>态度</label>
				<uni-rate class="user-score-rate" :size="24" :margin="16" allow-half v-model="score1" />
				<text>{{getScore1Text}}</text>
			</view>
			<view class="evaluate-item">
				<label>效率</label>
				<uni-rate class="user-score-rate" :size="24" :margin="16" allow-half v-model="score2" />
				<text>{{getScore2Text}}</text>
			</view>
			<view class="evaluate-item">
				<label>结果</label>
				<uni-rate class="user-score-rate" :size="24" :margin="16" allow-half v-model="score3" />
				<text>{{getScore3Text}}</text>
			</view>
		</view>
		<uni-easyinput class="evaluate-content" type="textarea" v-model="content" :inputBorder="false"
			:placeholderStyle="placeholderStyle" placeholder="对本次服务是否满意？可以表扬优秀之处，也可以描述问题，帮助Ta改善~">
		</uni-easyinput>
		<view class="evaluate-footer">
			<label class="evaluate-btn cancel" @click="onResetClick">重置</label>
			<label class="evaluate-btn ok" @click="onSubmitClick">提交</label>
		</view>
	</view>
</template>

<script>
	import UserItemCard from '../../components/user-Item-Card.vue'
	export default {
		components: {
			UserItemCard
		},
		data() {
			return {
				score: 0,
				userinfo: {
					head: 'url',
					userName: "沈燕",
					company: "公司名称某某某有限公司",
					isAuth: true
				},

				isAnonymous: false, //是否匿名
				score:-1,
				score1: -1,
				score2: -1,
				score3: -1,
				content: "",
			}
		},
		watch: {
			form: {
				handler(newName, oldName) {
					this.$forceUpdate()
				},
				deep: true
			}
		},
		computed: {
			getScore0Text() {
				return this.getScoreText(this.score);
			},
			getScore1Text() {
				return this.getScoreText(this.score1);
			},
			getScore2Text() {
				return this.getScoreText(this.score2);
			},
			getScore3Text() {
				return this.getScoreText(this.score3);
			}
		},
		methods: {
			getScoreText(score) {
				if (score > 4) {
					return "非常满意"
				} else if (score > 3) {
					return "满意"
				} else if (score > 2) {
					return "一般"
				} else if(score>0){
					return "差"
				}else{
					return""
				}
			},
			onResetClick() {
				console.log("重置")
			},
			onSubmitClick() {
				console.log("提交")
				uni.navigateTo({
					url:"./demandProgress?index=2"
				})
			}
		}
	}
</script>

<style>
	page {
		height: calc(100% - 8rpx);
		background-color: #F4F4F4;
	}

	.evaluate-main {
		margin-top: 8rpx;
		background-color: #FFFFFF;
		padding: 0 32rpx;
		height: 100%;
	}

	.user {
		padding: 32rpx 0 !important;
	}

	.evaluate-title {
		display: flex;
		align-items: center;
		height: 114rpx;
		font-size: 34rpx;
		color: #181818;
		font-weight: 500;
		background: url(../../static/images/icon_pingjia@3x.png) left center no-repeat;
		background-size: 32rpx;
		padding-left: 46rpx;
		justify-content: space-between;
		border-bottom: 1rpx solid #DDDDDD;
	}

	.evaluate-title label {
		color: #ACACAC;
		font-size: 22rpx;
		display: flex;
		align-items: center;
	}

	.evaluate-title label radio {
		transform: scale(0.7);
	}

	.evaluate-rate {
		margin-top: 40rpx;
	}

	.evaluate-item {
		display: flex;
		align-items: center;
		margin-bottom: 38rpx;
	}

	.evaluate-item:first-child label {
		color: #181818;
		font-weight: 500;
	}

	.evaluate-item label {
		color: #7B7B7B;
		font-size: 28rpx;
		font-weight: 500;
		margin-right: 32rpx;
	}
	.evaluate-item:first-child text{
		color: #181818;
	}
.evaluate-item text{
	font-size: 28rpx;
	color: #7B7B7B
}
	.evaluate-content .uni-easyinput {
		background: #F4F4F4;
		border-radius: 16rpx;
		padding: 28rpx 24rpx;
		font-size: 24rpx;
		color: #ACACAC;
	}

	.evaluate-footer {
		display: flex;
		width: calc(100% - 64rpx);
		height: 163rpx;
		position: fixed;
		bottom: 0;
		align-items: center;
		justify-content: space-evenly;
		border-top: 1rpx solid #DDDDDD;
	}

	.evaluate-btn {
		width: 187rpx;
		height: 60rpx;
		line-height: 60rpx;
		border: 2rpx solid #E5E5E5;
		border-radius: 12rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.evaluate-btn:active {
		opacity: 0.8;
	}

	.evaluate-btn.cancel {
		color: #7B7B7B;
		background: #FBFAFC;
	}

	.evaluate-btn.ok {
		color: #FFFFFF;
		background: #2050F5;
	}
</style>
